<template>
  <div class="app-container">
    <div class="config-box">
      <div class="config-title">添加/修改管理员</div>
      <div class="tabs-box" style="padding:0 20px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本设置" name="first" />
          <el-tab-pane label="开发设置" name="second" />
          <el-tab-pane label="支付配置" name="third" />
          <el-tab-pane label="菜单设置" name="fourth" />
        </el-tabs>
      </div>
      <div class="config-form-div">
        <!-- size用于控制该表单内组件的尺寸值为medium / small / mini -->
        <el-form :model="form" :label-position="labelPosition" label-width="80px">
          <div v-if="activeName=='first'">
            <el-form-item label="应用名称">
              <el-input v-model="form.app_title" class="form-input" placeholder="请输入应用名称" />
            </el-form-item>
            <el-form-item label="应用ID">
              <el-input v-model="form.app_id" class="form-input" placeholder="请输入应用ID" />
            </el-form-item>
            <el-form-item label="应用秘钥">
              <el-input v-model="form.app_secret" class="form-input" placeholder="请输入应用秘钥" />
            </el-form-item>
          </div>
          <div v-if="activeName=='second'">
            <el-form-item label="对接地址">
              <el-input v-model="form.app_url" class="form-input" :readonly="true" placeholder="请输入对接地址" />
            </el-form-item>
            <el-form-item label="token值">
              <el-input v-model="form.app_token" class="form-input" placeholder="请输入token值" />
            </el-form-item>
            <el-form-item label="解密秘钥">
              <el-input v-model="form.encodingAesKey" class="form-input" placeholder="请输入解密秘钥" />
            </el-form-item>
            <el-form-item label="消息加密">
              <el-switch
                v-model="form.message_encrypt"
                class="config-switch"
                inactive-color="#aaa"
                inactive-text="false"
                inactive-value="0"
                active-color="#5FB878"
                active-text="true"
                active-value="1"
                :width="52"
                @change="change"
              />
            </el-form-item>
          </div>
          <div v-if="activeName=='third'">
            <el-form-item label="商户ID">
              <el-input v-model="form.wx_mchid" class="form-input" placeholder="请输入商户ID" />
            </el-form-item>
            <el-form-item label="支付秘钥">
              <el-input v-model="form.wx_key" class="form-input" placeholder="请输入支付秘钥" />
            </el-form-item>
            <el-form-item label="证书文件">
              <el-input v-model="form.keystore_file_name" class="form-input" placeholder="请输入文件名" />
              <div style="color:red;font-size:13px">为了安全文件请自行复制到 resources/weixin/cer 目录下面，这里直接写文件名称</div>
            </el-form-item>
            <el-form-item label="证书秘钥">
              <el-input v-model="form.keystore_password" class="form-input" placeholder="请输入证书秘钥" />
              <div style="color:red;font-size:13px">*.填写商户号即可</div>
            </el-form-item>
          </div>
          <div v-if="activeName=='fourth'">
            <el-form-item label-width="0px" style="border-bottom:1px solid #ccc;padding-bottom:20px">
              <div style="font-size:20px;color:#333;font-weight:600">
                <span>自定义菜单</span>
                <span style="color:red;font-weight:500">(点击左侧视图上的按钮进行操作)</span>
              </div>
            </el-form-item>
            <el-form :inline="true" style="margin-left:20px;">
              <el-form-item>
                <div class="left-box">
                  <img class="header-img" src="../../assets/image/phone.png">
                  <div class="footer">
                    <div class="menu">
                      <div v-for="(item,i) in menu_list" :key="i" class="menu_bottom">
                        <!-- 一级菜单 -->
                        <div class="menu_item" :class="isActive==i?'active':''" @click="menuFun(i,item)">{{ item.name }}</div>
                        <!--以下为二级菜单-->
                        <div v-if="isSubMenuFlag==i" class="submenu">
                          <div class="subtitle" v-for="(subItem,k) in item.item.son" :key="k">
                            <dir class="menu_subItem" :class="isSubMenuActive==(i+'_'+k)?'active':''" @click="subMenuFun(subItem, i, k)">{{subItem.name}}</dir>
                          </div>
                          <!--二级菜单加号， 当长度 小于  5 才显示二级菜单的加号  -->
                          <div class="menu_bottom menu_addicon" v-if="item.item.son.length<5" @click="addSubMenu(item)">
                            <el-tooltip class="tooltip" :content="tooltip2" placement="right-start" effect="light">
                              <i class="el-icon-plus" />
                            </el-tooltip>
                          </div>
                        </div>
                      </div>
                      <!-- 一级菜单加号 -->
                      <div class="menu_bottom menu_addicon" v-if="menuKeyLength<3" @click="addMenu">
                        <el-tooltip class="tooltip" :content="tooltip1" placement="right-start" effect="light">
                          <i class="el-icon-plus" />
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="right-box" v-if="showRightFlag">
                  <div class="menu-top">
                    <span class="menu-text">{{tempObj.name}}</span>
                    <el-button size="mini" type="danger" @click="delMenu(tempObj.config_id,tempObj.id,tempObj.pid)">删除{{tempObj.pid!=0?'子':''}}菜单</el-button>
                  </div>
                  <div class="menu-cont">
                    <div class="menu-option" style="padding-top:30px">
                      <span class="menu-text">菜单名称</span>
                      <el-input v-model="tempObj.name" class="mr-l-20" style="width:400px" placeholder="请输入菜单名称" />
                      <div class="span">字数不超过4个汉字或8个字母</div>
                    </div>
                    <div class="menu-option" style="padding-top:10px">
                      <span class="menu-text">网页链接</span>
                      <el-input v-model="tempObj.url" class="mr-l-20" style="width:400px" placeholder="请输入网页链接" />
                      <!-- <el-button>系统链接</el-button> -->
                    </div>
                  </div>
                  <div class="menu-btn">
                    <el-button type="success" @click="saveMenu">保存</el-button>
                  </div>
                  <div class="menu-footer">
                    <el-button type="primary" @click="releaseMenu">发布菜单</el-button>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { saveConfig, getConfigInfo, addParentMenu, addChildMenu, delMenu, editMenu, releaseMenu } from '@/api/wx'

export default {
  data() {
    return {
      form: {
        app_title: '', // 应用名称
        app_id: '', // 应用ID
        app_secret: '', // 应用秘钥
        app_url: 'http://192.168.1.80:801//weixin/event/message?appid=', // 对接地址
        app_token: '', // token值
        encodingAesKey: '', // 解密秘钥
        message_encrypt: '0', // 消息是否加密 0 否 1 是
        wx_mchid: '', // 商户id
        wx_key: '', // 支付秘钥
        keystore_file_name: '', // 证书文件
        keystore_password: '' // 证书秘钥
      },
      id: '',
      activeName: 'first',
      labelPosition: 'right', // label对齐方式，可选值为right、top、left
      menu_list: [], // 菜单配置
      showRightFlag: false, // 右边配置显示
      tooltip1: '最多添加3个一级菜单',
      tooltip2: '最多添加5个子菜单',
      isActive: -1, // 一级菜单选中
      isSubMenuActive: -1, //二级菜单选中
      isSubMenuFlag: -1, // 二级菜单显示标志
      tempObj: {}, // 右边临时变量，作为中间值牵引关系
    }
  },
  created() {
    this.id = this.$route.query.id
    // console.log(this.$route.query.id)
  },
  mounted() {
    this.getInfoConfig()
  },
  computed:{
    menuKeyLength:function(){
      return this.menu_list.length;
    }
  },
  methods: {
    /* eslint-disable */   //如果要eslint验证，请把这段代码删掉

    // 获取配置信息
    getInfoConfig(){
      getConfigInfo({id:this.id}).then(res=>{
        if(res.state){
          // console.log(res)
          this.menu_list=JSON.parse(res.data.menu_list)
          this.form.app_title=res.data.cfg.app_title
          this.form.app_id=res.data.cfg.app_id
          this.form.app_secret=res.data.cfg.app_secret
          this.form.app_url=this.form.app_url+res.data.cfg.id
          this.form.app_token=res.data.cfg.token
          this.form.encodingAesKey=res.data.cfg.encodingAesKey
          this.form.wx_mchid=res.data.cfg.wx_mchid
          this.form.wx_key=res.data.cfg.wx_key
          this.form.keystore_file_name=res.data.cfg.keystore_file_name
          this.form.keystore_password=res.data.cfg.keystore_password
          if(!res.data.cfg.message_encrypt){
            this.form.message_encrypt='0'
          }else{
            this.form.message_encrypt='1'
          }
          //console.log(this.menu_list)

        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // 创建
    onSubmit() {
      if (!this.form.app_title) {
        this.$message.error('请输入应用名称!')
        return
      }
      if (!this.form.app_id) {
        this.$message.error('请输入应用ID!')
        return
      }
      if (!this.form.app_secret) {
        this.$message.error('请输入应用秘钥!')
        return
      }
      if (!this.form.app_token) {
        this.$message.error('请输入token值!')
        return
      }
      if (!this.form.message_encrypt) {
        this.$message.error('请输入解密秘钥!')
        return
      }
      if (!this.form.wx_mchid) {
        this.$message.error('请输入商户id!')
        return
      }
      if (!this.form.wx_key) {
        this.$message.error('请输入支付秘钥!')
        return
      }
      if (!this.form.keystore_file_name) {
        this.$message.error('请输入证书文件!')
        return
      }
      if (!this.form.keystore_password) {
        this.$message.error('请输入证书秘钥!')
        return
      }
      //console.log(this.form)

      let data={}
      data['cfg.id']=this.id
      data['cfg.app_title']=this.form.app_title
      data['cfg.app_id']=this.form.app_id
      data['cfg.app_secret']=this.form.app_secret
      data['cfg.token']=this.form.app_token
      data['cfg.message_encrypt']=this.form.message_encrypt
      data['cfg.encodingAesKey']=this.form.encodingAesKey
      data['cfg.wx_mchid']=this.form.wx_mchid
      data['cfg.wx_key']=this.form.wx_key
      data['cfg.keystore_file_name']=this.form.keystore_file_name
      data['cfg.keystore_password']=this.form.keystore_password

      this.save(data)
    },

    // 保存用户信息函数
    save(data){
      saveConfig(data).then(res=>{
        if(res.state){
          this.$message({ message: res.msg, type: 'success', duration: 2000 })
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.push({path:'/wx/config-list'})
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //添加一级菜单
    addMenu(){
      let data={id:this.id,name: "菜单名称",url: ""}

      this.addParentMenu(data)
      //console.log(this.menu_list)
    },

    // 一级菜单添加
    addParentMenu(datas){
      let data={}
      data['id']=datas.id
      data['name']=datas.name
      data['url']=datas.url
      addParentMenu(data).then(res=>{
        if(res.state){
          this.getInfoConfig()
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // 添加二级菜单
    addSubMenu(item){
      // let subMenuKeyLength = item.item.son.length;//获取二级菜单key长度
      let data={id:item.config_id,pid:item.id,name: "子菜单名称 ",url: ""}

      this.addChildMenu(data)
      //console.log(item)
    },

    // 二级菜单添加
    addChildMenu(datas){
      let data={}
      data['id']=datas.id
      data['pid']=datas.pid
      data['name']=datas.name
      data['url']=datas.url
      addChildMenu(data).then(res=>{
        if(res.state){
          this.getInfoConfig()
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //一级菜单选中
    menuFun(i,item){
      this.showRightFlag=true //右边菜单显示
      this.tempObj = item //这个如果放在顶部，flag会没有。因为重新赋值了。
      this.isActive = i //一级菜单选中样式
      this.isSubMenuFlag = i //二级菜单显示标志
      this.isSubMenuActive = -1 //二级菜单去除选中样式
    },

    // 二级菜单选中
    subMenuFun(subItem, index, k){
      this.showRightFlag = true //右边菜单显示
      this.tempObj = subItem  //将点击的数据放到临时变量，对象有引用作用
      this.isSubMenuActive = index + "_" + k //二级菜单选中样式
      this.isActive = -1 //一级菜单去除样式
    },

    // 保存菜单
    saveMenu(){
      if(!this.tempObj.name){
        this.$message.error('请输入菜单名!')
        return
      }
      if(!this.tempObj.url){
        this.$message.error('请输入网页链接!')
        return
      }
      let data={}
      data['config_id']=this.tempObj.config_id
      data['menu_id']=this.tempObj.id
      data['name']=this.tempObj.name
      data['url']=this.tempObj.url
      editMenu(data).then(res=>{
        if(res.state){
          this.$message({ type: 'success', message: res.msg, duration: 2000 })
          this.getInfoConfig()
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // 发布菜单
    releaseMenu(){
      if(!this.tempObj.name){
        this.$message.error('请输入菜单名!')
        return
      }
      if(!this.tempObj.url){
        this.$message.error('请输入网页链接!')
        return
      }
      releaseMenu({id:this.tempObj.config_id}).then(res=>{
        if(res.state){
          this.$message({ type: 'success', message: '菜单发布成功', duration: 2000 })
          this.getInfoConfig()
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // 删除菜单
    delMenu(id,menu_id,pid){
      let text=''
      if(pid==0){
        text="确定要删除该一级菜单吗？"
      }else{
        text="确定要删除该子级菜单吗？"
      }
      this.$confirm(text, '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu({ id: id, menu_id: menu_id}).then(res => {
          if (res.state) {
            this.$message({ type: 'success', message: res.msg})
            this.showRightFlag = false
            this.getInfoConfig()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {})
    },

    // tabs选中
    handleClick(tab) {
      //console.log(tab.name);
      this.activeName=tab.name
    },

    // 状态改变
    change(val) {
      // console.log(val)
      this.form.message_encrypt = val
    },

    // 返回页面
    back(){
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({path:'/wx/config-list'})
    },

  }
}
</script>

<style  lang="scss" scoped>
.config-box{
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.12);
  background: #fff;

  .config-title{
    font-size: 16px;
    color: #333;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .config-form-div{
    padding: 16px 20px;

    .form-input{
      width: 480px;
    }

    .left-box{
      position: relative;
      width:320px;
      height: 540px;
      border: 1px solid #ccc;
      
      .header-img{
        width:100%;
      }

      .footer{
        position: absolute;
        left: 0;
        bottom: 0;
        width:100%;
        height: 50px;
        background-image: url('../../assets/image/bg_mobile.png');
        background-repeat: no-repeat;
        // border-top: 1px solid #ccc;

       /*第一级菜单*/
      .menu{
        margin-left: 43px;
        display: flex;
        align-items: center;
        .menu_bottom{
          position: relative;
          height: 50px;
          width: 92px;
          text-align: center;
          background-color: #e2e2e2;
          border: 1px solid #ebedee;
          cursor: pointer;
          &.menu_addicon{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
          }
          .menu_item{
            height: 50px;
            line-height: 50px;
            text-align: center;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.active{
              border: 1px solid #2bb673;
            }
          }
          .tooltip{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50px;
          }
          .menu_subItem{
            height: 44px;
            line-height: 44px;
            text-align: center;
            box-sizing: border-box;
            /*padding: 14px 0;*/
            &.active{
              border: 1px solid #2bb673;
            }
          }
        }
        i{
          color:#2bb673;
          font-size: 16px;
        }
        /*第二级菜单*/
        .submenu{
          position: absolute;
          width: 92px;
          bottom: 50px;
          .subtitle{
            background-color: #e8e7e7;
            box-sizing: border-box;
            margin-bottom: 2px;
          }
        }
      }

      }
    }

    .right-box{
      position: relative;
      width: 800px;
      height: 540px;
      background: #f8f8f8;

      .menu-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:10px 0;
        margin:0 30px;
        border-bottom: 1px solid #ccc;
      }

      .menu-option{
        margin:0 30px;

        .span{
          font-size: 15px;
          margin-left:100px;
          height:36px;
          line-height:36px;
        }
      }

      .mr-l-20{
        margin-left: 20px;
      }

      .menu-text{
        font-size: 16px;
        color:#333;
      }

      .menu-btn{
        padding: 30px 0 0 200px;
      }

      .menu-footer{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eee;
      }

    }
  }
}
</style>

<style lang="scss">
.config-form-div{
   label{
    font-weight: 500;
  }
  .el-form-item__label{
    font-size: 15px;
    color: #333;
  }
}

.config-switch{
  .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }

  /*打开时文字位置设置*/
  .el-switch__label--right {
    z-index: 1;
    left: -6px;
  }

  /*关闭时文字位置设置*/
  .el-switch__label--left {
    z-index: 1;
    right: -5px;
  }

  /*显示文字*/
  .el-switch__label.is-active {
    display: block;
  }
}
</style>